<template>
  <el-dialog title="提示" :visible="showDialog" width="55%" @close="btnOK">
    <el-row type="flex" justify="space-around">
      <el-col>
        <span v-if="getlistItem.questionType === '1'">【题型】: 单选题</span>
        <span v-else-if="getlistItem.questionType === '2'"
          >【题型】: 多选题</span
        >
        <span v-else>【题型】: 简答题</span>
      </el-col>
      <el-col>【编号】: {{ getlistItem.id }}</el-col>
      <el-col>
        <span v-if="getlistItem.difficulty === '1'">【难度】: 简单</span>
        <span v-else-if="getlistItem.difficulty === '2'">【难度】: 一般</span>
        <span v-else>【难度】: 困难</span>
      </el-col>
      <el-col>【标签】: {{ getlistItem.tags }}</el-col>
    </el-row>

    <el-row type="flex" justify="space-around" style="margin-top: 20px">
      <el-col>【学科】：{{ getlistItem.subject }}</el-col>
      <el-col>【目录】：{{ getlistItem.directoryName }}</el-col>
      <el-col>【方向】：{{ getlistItem.direction }}</el-col>
      <el-col></el-col>
    </el-row>
    <hr />
    <!-- 题干部分 -->
    <el-row type="flex" justify="space-around">
      <el-col>【题干】:</el-col>
    </el-row>
    <el-row type="flex" justify="space-around">
      <el-col><div v-html="getlistItem.question"></div></el-col>
    </el-row>
    <el-row type="flex" justify="space-around">
      <el-col>
        <span v-if="getlistItem.questionType === '1'">
          <span>单选题</span>
          <span>选项：（以下选中的选项为正确答案）</span>
        </span>
        <span v-else-if="getlistItem.questionType === '2'">
          <span>多选题</span>
          <span>选项：（以下选中的选项为正确答案）</span>
        </span>
        <!-- <span v-else>简答题</span> -->
      </el-col>
    </el-row>
    <!-- 单选框 -->
    <!-- 要使用 Radio 组件，只需要设置v-model绑定变量，选中意味着变量的值为相应 Radio label属性的值，label可以是String、Number或Boolean。 -->
    <!-- 结合el-radio-group元素和子元素el-radio可以实现单选组，在el-radio-group中绑定v-model，在el-radio中设置好label即可，无需再给每一个el-radio绑定变量，另外，还提供了change事件来响应变化，它会传入一个参数value。 -->
    <el-radio-group v-model="radio" v-if="getlistItem.questionType === '1'">
      <el-row
        v-for="(item, index) in getlistItem.options"
        :key="index"
        style="margin: 10px 0px"
      >
        <el-radio :label="item.isRight" :disabled="item.isRight === 0">{{
          item.title
        }}</el-radio>
      </el-row>
    </el-radio-group>
    <!-- 多选框 -->
    <div v-else-if="getlistItem.questionType === '2'">
      <el-row
        v-for="(item, index) in getlistItem.options"
        :key="index"
        style="margin: 10px 0px"
      >
        <el-checkbox v-model="item.isRight" :disabled="item.isRight === 0">
          {{ item.title }}
        </el-checkbox>
      </el-row>
    </div>
    <hr />
    <el-row type="flex" justify="space-around">
      <el-col
        >【参考答案】:
        <el-button @click="VideoShow = true" type="danger"
          >视频答案预览</el-button
        >
        <el-row v-if="VideoShow" style="margin-top: 20px">
          <video
            src="getlistItem.videoURL"
            controls="controls"
            style="width: 400px"
          ></video>
        </el-row>
      </el-col>
    </el-row>
    <hr />
    <el-row type="flex" justify="space-around">
      <el-col>【答案解析】: https://cn.vuejs.org/ 有答案</el-col>
    </el-row>
    <hr />
    <el-row type="flex" justify="space-around">
      <el-col>【题目备注】: https://cn.vuejs.org/ 有答案</el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="btnOK">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  // 需要传入一个props变量来控制 显示或者隐藏
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    getlistItem: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      radio: 1,
      VideoShow: false,
    };
  },
  methods: {
    btnOK() {
      this.$emit("close", false);
    },
  },
};
</script>

<style scoped >
.dialog-footer {
  display: flex;
  justify-content: center;
}
</style>
